<template>
  <div class="train-page1" >

    <div class="type-box">
      <div class="data">
        <span class="name1">考试状态:</span>
        <span class="item" v-for="(item,index) in typeLIst1" :class="{active:index==current}"
          @click="getbaomingFlag(item.num,index)">{{item.name}}</span>
      </div>
<!--      <div class="data">
        <span class="name1">类 型:</span>
        <span class="item" v-for="(item,index) in typeLIst2" :class="{active:index==current1}"
          @click="getclassify(item.id,index)">{{item.name}}</span>
      </div> -->
    </div>
    <div class="main-box" v-show="show">
      <!-- <h3 class="top-title">所有培训计划</h3> -->
      <div class="all-train">
        <div class="exam-item" v-for="(item,index) in paperList">
          <span class="name" :title="item.name">{{item.name}}</span>
          <div style="display: flex;align-items: center;">
            <!-- <img src="@/assets/image/exam-item.png" alt=""> -->

            <div class="new-left">
              <img src="@/assets/image/exam-item.png" alt="">
              <div class="staandname">
                <span class="status" v-show="item.baoming=='1'">报名未开始</span>
                <span class="status" v-show="item.baoming=='2'">正在报名</span>
                <span class="status" v-show="item.baoming=='3'">报名结束</span>
                <!-- <span class="name" :title="item.name">{{item.name}}</span> -->
              </div>
            </div>

            <div class="item">
              <div class="exam-info">
                <!-- <div class="staandname">
                  <span class="status" v-show="item.baoming=='1'">报名未开始</span>
                  <span class="status" v-show="item.baoming=='2'">正在报名</span>
                  <span class="status" v-show="item.baoming=='3'">报名结束</span>
                </div> -->

                <div class="stop-time">报名截止时间:&nbsp;&nbsp;{{item.baomingEndTime}}</div>
                <div class="exam-time">考试开始时间:&nbsp;&nbsp;{{item.startTime}}</div>
                <div class="person-num">
                  已报名人数: {{item.userKaoshiCount}} 人
                </div>
              </div>

              <div class="is-sign-up0 gonggong" v-show="item.baoming=='1'">
                <span class="signup">报名未开始</span>
              </div>

              <div class="is-sign-up0 gonggong" v-show="item.baoming=='3'&&item.joinFlag =='0'">
                <span class="signup">报名结束</span>
              </div>


              <div class="is-sign-up1 gonggong" v-show="item.joinFlag =='0' && item.baoming=='2'"
                @click="goContent('signuppage',item)">
                <span class="signup">我要报名</span>
              </div>

              <div class="is-sign-up2 gonggong" v-show="item.joinFlag =='1' && item.educationUserKaoshi.joinFlag =='1'">
                <span class="chenggong">报名成功</span>
              </div>

              <div class="dengdai" v-show="item.joinFlag =='1' && item.educationUserKaoshi.joinFlag =='0'">
                <div class="is-sign-up3 gonggong">
                  <span class="yibaoming">已报名</span>
                </div>
                <span class="shenghe">等待审核</span>
              </div>

              <div class="dengdai" v-show="item.joinFlag =='1' && item.educationUserKaoshi.joinFlag =='2'">
                <div class="is-sign-up3 gonggong">
                  <span class="yibaoming">已报名</span>
                </div>
                <span class="shenghe">审核未通过</span>
              </div>

            </div>
          </div>
          <div style="clear:both"></div>
        </div>
      </div>
      <nodata v-show="paperList.length==0 && start"></nodata>
      <ui-pagination class="study-pagination" v-show="paperList.length!=0" :total="total" @pageChange="pageChange" :size="pageSize"></ui-pagination>
    </div>
    <el-dialog :title="imgtitle" :visible.sync="dialogTableVisible" class="ckeck-dialog" :show-close="false"
      :close-on-press-escape="false" :close-on-click-modal="true">
      <div class="check-main">
        <h3 class="title">上传人脸照片</h3>
        <div class="up-box">
          <el-upload class="avatar-uploader" :class="addClass1" action="" :auto-upload="false" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-change="change1"
            v-loading="loading1" element-loading-text="人脸上传中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <i v-if="imageUrl" class="el-icon-edit "></i>
            <span class="text" v-if="!imageUrl">上传人脸</span>
          </el-upload>
        </div>
        <el-button type="primary" class="upload-button" @click="next" v-show="!load">关闭</el-button>
        <!-- <el-button type="primary" :loading="true" v-show="load" class="upload-button">照片上传中...</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Pagination from '@/components/pagination.vue'
  import {
    Notification,
    Message
  } from 'element-ui';
  import Cookies from 'js-cookie'
  import nodata from '@/components/nodata.vue'
  import $ from "jquery"
  import 'babel-polyfill'
  import '../../assets/css/style.less'
  import '../../assets/css/fonts/iconfont.css'
  export default {

    components: {
      'ui-pagination': Pagination,
      nodata
    },
    data() {
      return {
        start: false,
        load: false,
        imageUrl: '',
        addClass1: '',
        loading1: false,
        dialogTableVisible: false,
        imgtitle: '验证人脸',
        total: null,
        paperList: [],
        typeLIst1: [{
            name: '全部',
            addClass: 'active',
            num: null,
          },
          {
            name: '正在报名',
            addClass: '',
            num: 0,
          },
          {
            name: '报名结束',
            addClass: '',
            num: 1,
          },
        ],
        current: 0,
        current1: 0,
        typeLIst2: [],
        show: true,
        leavenum: 0,
        pageNo: 1,
        pageSize: 8,
        classify: null,
        baomingFlag: null,
        activeIndex: 0,
        photo: '',
        userData: [],
        timer: null,
        BaomingIsOver:false,
      }
    },
    created() {
      this.gettreeName();
      this.getData();

    },
    mounted() {
      // this.timer = setInterval(() => {
      //   this.getData();
      // }, 1000)
      //判断用户离开几次
      // document.addEventListener('visibilitychange', this.handleVisiable)

    },
    // destroyed(){
    //   document.removeEventListener('visibilitychange', this.handleVisiable)
    // },
    methods: {
      next() {
        this.dialogTableVisible = false;
      },
      async handleAvatarSuccess(res, file) {
        await this.getPersonInfo();
        Notification.warning({
          title: '提示',
          message: '您已成功上传照片，请点击报名按钮！'
        })
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      change1(file, fileList) {

        let that = this;
        var formdata = new FormData();
        formdata.append('file', file.raw);
        this.loading1 = true;
        this.$axios({
            url: '/cloud/uploadFace',
            method: 'post',
            data: formdata,
            headers: {
              'Content-Type': 'multipart/form-data'
            },

          }).then((response) => {
            //that.$message.success('头像已更新');
            setTimeout(() => {
              // that.photo = response.data.data.location;
              that.imageUrl = that.$axios.defaults.baseURL + response.data.data;
              that.loading1 = false;
              that.addClass1 = 'isbg';
            }, 500)

            // Cookies.set("photo",that.imgUrl,{ expires: 1 });
            // that.$emit('imgChange',that.imgUrl);

          })
          .catch(function(error) {
            console.log(error);

            if (error.data.code == "20006" || error.data.code == "20007") {
              if (that.activeIndex < 2) {
                that.photo = "";
                that.load = false;
                that.imageUrl = "";
                that.addClass1 = "";
                that.activeIndex += 1;
              } else {
                Notification.warning({
                  title: '提示',
                  message: "身份证验证失败三次后系统默认跳过身份证验证！"
                })
                that.active = 1;
                that.title = "验证手机号";
                that.photo = "";
                that.addClass1 = "";
                that.load = false;
                that.checkeFlag = true;
              }

            }

            that.loading1 = false;
          })

      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      goPage() {

      },
      async getPersonInfo() {
        let that = this;
        await this.$axios.$post("/f/userDetail")
          .then(function(response) {
            that.userData = response.data
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      async goContent(url, item) {
        await this.getPaper(item);
        if(this.BaomingIsOver){
          return;
        }
        await this.getPersonInfo();
        if (Cookies.get("token")) {
          if (this.userData.face) {
            this.$router.push({
              name: url,
              params: item
            });
          } else {
            Notification.warning({
              title: '提示',
              message: '您没人脸照片，请先上传人脸照片！'
            })
            this.dialogTableVisible = true;

          }

        } else {
          this.$router.push("/login")
        }

      },
      pageChange(index) {
        this.pageNo = index;
        this.getData();
      },
      // handleVisiable(e) {
      //     if (e.target.visibilityState === 'hidden') {
      //       // 要执行的方法
      //       this.leavenum++;
      //     }
      //     else{
      //       let str = "你已离开当前页面"+this.leavenum+"次";
      //       // alert("你已离开当前页面"+this.leavenum+"次")
      //       this.$confirm(str, '提示', {
      //         confirmButtonText: '确定',
      //         showCancelButton:false,
      //         type: 'warning'
      //       }).then(() => {

      //       }).catch(() => {

      //       });
      //     }
      // },
      async getPaper(item){
        let that = this;
        await this.$axios.$post("/f/getPaperByKaoshi?id=" + item.id)
          .then(function(response) {
            let item = response.data;
              let starttime;
              let endtime;
              let nowtime = new Date().getTime();
              let start, end;
                start = item.baomingStartTime;
                start = start.replace(/-/g, '/'); // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
                starttime = new Date(start).getTime()

                end = item.baomingEndTime;
                end = end.replace(/-/g, '/');
                endtime = new Date(end).getTime()
                if (endtime < nowtime) {
                  that.BaomingIsOver = true;
                  that.getData()
                  //报名结束
                  Notification.warning({
                    title: '提示',
                    message: '报名已结束！'
                  })

                }
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      getData() {
        let that = this;
        this.loading = true;
        this.$axios.$post("/f/pagePaperByKaoshi?pageNo=" + this.pageNo + "&pageSize=" + this.pageSize +
            "&baomingFlag=" + this.baomingFlag + "&classify=" + this.classify)
          .then(function(response) {
            console.log(response, 9090)
            // that.start = true;
            let list = response.data;
            that.total = response.count;
            that.start = true;
            // if (list.length != 0) {
            //   let starttime;
            //   let endtime;
            //   let nowtime = new Date().getTime();
            //   let start, end;
            //   list.forEach((item, i) => {
            //     start = item.baomingStartTime;
            //     start = start.replace(/-/g, '/'); // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
            //     starttime = new Date(start).getTime()

            //     end = item.baomingEndTime;
            //     end = end.replace(/-/g, '/');
            //     endtime = new Date(end).getTime()

            //     if (starttime > nowtime) {
            //       //报名未开始
            //       item.baoming = '1'
            //     }
            //     if (starttime < nowtime && nowtime < endtime) {
            //       //报名开始
            //       item.baoming = '2'
            //     }
            //     if (endtime < nowtime) {
            //       //报名结束
            //        item.baoming = '3'
            //     }
            //     // if(!item.educationUserKaoshi){
            //     //   item.educationUserKaoshi = [];
            //     //   item.educationUserKaoshi.joinFlag = 'null'
            //     // }

            //   })
            // }
            console.log('hha ')
            console.log(list)
            that.paperList = list;
            that.loading = false;
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },

      getbaomingFlag(num, index) {
        this.current = index;

        if (this.baomingFlag != num) {
          this.baomingFlag = num;
          this.getData();
        }
      },
      //考试类型赋值
      getclassify(id, index) {
        this.current1 = index;
        console.log(id);
        if (this.classify != id) {
          this.classify = id;
          this.getData()
        }
      },

      //得到考试的类型
      gettreeName() {
        let that = this;
        this.$axios.$post("/f/listPaperClassify")
          .then(function(response) {
            console.log(response, 10086)
            let list = response.data;
            if (list.length != 0) {
              list.forEach((item, i) => {
                if (item.treeName == 'a') {
                  item.name = "必修"
                }
                if (item.treeName == 'b') {
                  item.name = "选修"
                }
              })
              list.unshift({
                'id': '',
                'treeName': '',
                'name': '全部',
                'addClass': 'active'
              })
              that.typeLIst2 = list;
              console.log(that.typeLIst2, 99999)
            }
          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  .train-page1 {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 25px;
    overflow: hidden;
    overflow-y: auto;

    .type-main {
      width: 100%;
      box-sizing: border-box;
      padding: 0px;
      border: 1px solid #eaeaea;

      .type-item {
        width: 100%;

        .big-title {
          width: 10rem;
          height: 100%;
          position: relative;
          float: left;
          box-sizing: border-box;
          border-right: 1px solid #eaeaea;
          border-bottom: 1px solid #eaeaea;

          span {
            position: absolute;
            font-size: 16px;
            width: 100%;
            text-align: center;
            display: block;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            color: #555555;
          }
        }

        .er-box {
          width: calc(100% - 10rem);
          float: left;
          box-sizing: border-box;

          .er-item {
            width: 100%;
            position: relative;
            box-sizing: border-box;


            .left {
              width: 15rem;
              float: left;
              text-align: center;
              font-size: 16px;
              color: #555555;
              border-right: 1px solid #eaeaea;
              border-bottom: 1px solid #eaeaea;
              box-sizing: border-box;
            }

            .right {
              width: calc(100% - 15rem);
              float: left;
              padding-top: 1rem;

              .text-item {
                padding: 0 1.5rem;
                height: 2rem;
                float: left;
                margin-bottom: 1rem;
                line-height: 2rem;
                color: #fff;
                font-size: 14px;
                border-radius: 1rem;
                margin-left: 1rem;
                display: block;
              }
            }


          }

          .er-item:nth-child(2n) {
            .left {}

            .right {}
          }
        }
      }

      .type-item:last-child {
        .big-title {
          border-bottom: 0;
        }

        .er-box {
          .er-item:last-child {
            .left {
              border-bottom: 0;
            }

          }
        }
      }
    }

    .type-box {
      width: 100%;

      .data {
        width: 100%;
        height: 30px;
        margin-bottom: 10px;

        .name1 {
          float: left;
          display: block;
          width: 70px;
          text-align: right;
          font-size: 14px;
          height: 30px;
          line-height: 30px;
          color: #555555;
        }

        .item {
          margin-left: 10px;
          height: 30px;
          line-height: 30px;
          padding: 0 10px;
          font-size: 14px;
          color: #666666;
          float: left;
          cursor: pointer;
        }

        .active {
          background: #0068b7;
          border-radius: 3px;
          color: #fff;
        }
      }
    }

    .content-box {
      padding-top: 0px !important;
    }
    // .all-train{
    //     width:100%;
    //     margin:0 auto;
    //     margin-bottom:60px;
    //     display: flex;
    //     flex-wrap: wrap;
    //     justify-content: space-between;
    //       .exam-item{
    //         cursor: pointer;
    //         width: 45%;
    //         // max-width: 600px;
    //         // height: 119px;
    //         // background-color: rgba(242, 240, 240, 100);
    //         border: 1px solid rgba(255, 255, 255, 100);
    //         margin: 20px 0;
    //         padding: 10px 20px;
    //         display: flex;
    //         flex-direction: column;
    //         box-shadow: 2px 2px 10px #409eff;
    //         background: url('../../assets/image/new-exam.png') right bottom no-repeat ;
    //         margin-left: calc(10%/4);
    //         margin-right: calc(10%/4);
    //         .new-left{
    //           display: flex;
    //           flex-direction: column;
    //           align-items: center;
    //           img{
    //             width: 60px;
    //             height: 60px;
    //           }
    //           .staandname{
    //             .status{
    //               border-radius: 2px;
    //               text-align: center;
    //               display: inline-block;
    //               width:60px;
    //               height: 20px;
    //               line-height: 20px;
    //               background-color:rgba(242, 45, 45, 100) ;
    //               color:#ffffff;
    //               font-size: 13px;
    //               font-family: PingFangSC-regular;
    //             }
    //           }
    //         }
    //         .name{
    //           height: 30px;
    //           line-height: 30px;
    //           display: inline-block;
    //           overflow:hidden;
    //           white-space: nowrap;
    //           text-overflow: ellipsis;
    //           // color: rgba(16, 16, 16, 100);
    //           font-size: 16px;
    //           text-align: center;
    //           font-family: PingFangSC-regular;
    //           color:#0076ca;
    //           font-weight: bold;
    //         }
    //         .item{
    //           display: flex;
    //           align-items: center;
    //           justify-content: space-between;
    //           width: 100%;
    //           .exam-info{
    //             margin-left: 11px;
    //             display: flex;
    //             flex-direction: column;
    //             justify-content: space-around;
    //             height: 80px;
    //             .exam-time{
    //               // width: 186px;
    //               // height: 20px;
    //               color: rgba(57, 158, 228, 100);
    //               font-size: 14px;
    //               text-align: left;
    //               font-family: PingFangSC-regular;
    //               margin-top: 4px;
    //             }
    //             .person-num{
    //               margin-top: 5px;
    //               width: 126px;
    //               height: 20px;
    //               color: rgba(157, 155, 155, 100);
    //               font-size: 14px;
    //               text-align: left;
    //               font-family: PingFangSC-regular;
    //             }

    //           }

    //           .gonggong{
    //             margin-top: 0 !important;
    //             width: 100px !important;
    //           }
    //           .is-sign-up1{
    //             cursor: pointer;
    //             margin-top:24px;
    //             width: 134px;
    //             height: 30px;
    //             border-radius: 4px;
    //             background-color: #0076CA;
    //             text-align: center;
    //             border: 1px solid rgba(187, 187, 187, 100);
    //             .signup{
    //               line-height: 30px;
    //                width: 56px;
    //                height: 20px;
    //                color: rgba(253, 253, 255, 100);
    //                font-size: 14px;
    //                text-align: left;
    //                font-family: PingFangSC-regular;
    //             }
    //           }
    //           .is-sign-up2{
    //             cursor: pointer;
    //             margin-top:24px;
    //             width: 134px;
    //             height: 30px;
    //             border-radius: 4px;
    //             background-color: #0076CA;
    //             text-align: center;
    //             border: 1px solid rgba(187, 187, 187, 100);
    //             .chenggong{
    //               line-height: 30px;
    //                width: 56px;
    //                height: 20px;
    //                color: rgba(253, 253, 255, 100);
    //                font-size: 14px;
    //                text-align: left;
    //                font-family: PingFangSC-regular;
    //             }
    //           }
    //             .is-sign-up3{
    //               cursor: pointer;
    //               margin-top:24px;
    //               width: 134px;
    //               height: 30px;
    //               border-radius: 4px;
    //               background-color: rgba(157, 155, 155, 100);
    //               text-align: center;
    //               border: 1px solid rgba(187, 187, 187, 100);
    //               .chenggong{
    //                 line-height: 30px;
    //                  width: 56px;
    //                  height: 20px;
    //                  color: rgba(253, 253, 255, 100);
    //                  font-size: 14px;
    //                  text-align: left;
    //                  font-family: PingFangSC-regular;
    //               }
    //               .yibaoming{
    //                 line-height: 30px;
    //                  width: 56px;
    //                  height: 20px;
    //                  color: rgba(253, 253, 255, 100);
    //                  font-size: 14px;
    //                  text-align: left;
    //                  font-family: PingFangSC-regular;
    //               }
    //             }

    //         }

    //       }
    //       .exam-item:hover{
    //         box-shadow: 3px 3px 12px #0076ca;
    //       }

    // }
    .all-train {
      width: 100%;
      margin: 0 auto;
      margin-bottom: 60px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .exam-item{
        // cursor: pointer;
        width: 45%;
        // max-width: 600px;
        // height: 119px;
        // background-color: rgba(242, 240, 240, 100);
        border: 1px solid rgba(255, 255, 255, 100);
        margin: 20px 0;
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        box-shadow: 2px 2px 10px #409eff;
        background: url('../../assets/image/new-exam.png') right bottom no-repeat ;
        margin-left: calc(10%/4);
        margin-right: calc(10%/4);
        background-color: #ffffff;
        .new-left{
          display: flex;
          flex-direction: column;
          align-items: center;
          img{
            width: 60px;
            height: 60px;
          }
          .staandname{
            .status{
              border-radius: 2px;
              text-align: center;
              display: inline-block;
              width:60px;
              height: 20px;
              line-height: 20px;
              background-color:rgba(242, 45, 45, 100) ;
              color:#ffffff;
              font-size: 13px;
              font-family: PingFangSC-regular;
            }
          }
        }
        .name {
          height: 30px;
          line-height: 30px;
          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: rgba(16, 16, 16, 100);
          font-size: 16px;
          text-align: center;
          font-family: PingFangSC-regular;
          color:#0076ca;
          font-weight: bold;
        }

        .item {
          display: flex;
          justify-content: space-between;
          width: 100%;
          position: relative;
          align-items: center;
          .exam-info {
            margin-left: 11px;
            display: flex;
            flex-direction: column;

            // width: 400px;
            .staandname {

              .status {
                width: 56px;
                height: 20px;
                color: rgba(242, 45, 45, 100);
                font-size: 14px;
                font-family: PingFangSC-regular;
              }
            }

            .stop-time {
              // width: 214px;
              min-height: 20px;
              color: rgba(57, 158, 228, 100);
              font-size: 14px;
              text-align: left;
              font-family: PingFangSC-regular;
              margin-top: 6px;
            }

            .exam-time {
              // width: 186px;
              height: 20px;
              color: rgba(57, 158, 228, 100);
              font-size: 14px;
              text-align: left;
              font-family: PingFangSC-regular;
              margin-top: 4px;
            }
            .person-num {
              margin-top: 5px;
              width: 126px;
              height: 20px;
              color: rgba(157, 155, 155, 100);
              font-size: 14px;
              text-align: left;
              font-family: PingFangSC-regular;
            }


          }

          .is-sign-up0 {
            // cursor: pointer;
            margin-top: 24px;
            width: 134px;
            height: 30px;
            border-radius: 4px;
            background-color: rgba(157, 155, 155, 100);
            text-align: center;
            // border: 1px solid rgba(187, 187, 187, 100);

            .signup {
              line-height: 30px;
              width: 56px;
              height: 20px;
              color: rgba(253, 253, 255, 100);
              font-size: 14px;
              text-align: left;
              font-family: PingFangSC-regular;
            }
          }

          .is-sign-up1 {
            cursor: pointer;
            margin-top: 24px;
            width: 134px;
            height: 30px;
            border-radius: 4px;
            background-color: #0076ca;
            text-align: center;
            // border: 1px solid rgba(187, 187, 187, 100);

            .signup {
              line-height: 30px;
              width: 56px;
              height: 20px;
              color: rgba(253, 253, 255, 100);
              font-size: 14px;
              text-align: left;
              font-family: PingFangSC-regular;
            }
          }
          .gonggong{
            // position: absolute;
            // right: 5px;
            // top: 30px;
            margin-top: 0 !important;
            width: 100px !important;
            font-weight: bold;
          }
          .is-sign-up2 {
            margin-top: 24px;
            width: 134px;
            height: 30px;
            border-radius: 4px;
            background-color: rgba(238, 92, 92, 100);
            text-align: center;
            // border: 1px solid rgba(187, 187, 187, 100);

            .chenggong {
              line-height: 30px;
              width: 56px;
              height: 20px;
              color: rgba(253, 253, 255, 100);
              font-size: 14px;
              text-align: left;
              font-family: PingFangSC-regular;
            }
          }

          .dengdai {
            display: flex;
            flex-direction: column;
            align-items: center;

            .is-sign-up3 {
              margin-top: 24px;
              width: 134px;
              height: 30px;
              border-radius: 4px;
              background-color: rgba(157, 155, 155, 100);
              text-align: center;
              // border: 1px solid rgba(187, 187, 187, 100);

              .yibaoming {
                line-height: 30px;
                width: 56px;
                height: 20px;
                color: rgba(253, 253, 255, 100);
                font-size: 14px;
                text-align: left;
                font-family: PingFangSC-regular;
              }
            }

            .shenghe {
              // width: 56px;
              height: 20px;
              color: rgba(242, 45, 45, 100);
              font-size: 14px;
              text-align: left;
              font-family: PingFangSC-regular;
              text-align: center;
            }
          }

        }

      }
      .exam-item:hover{
        box-shadow: 3px 3px 12px #0076ca;
      }

    }


    .ckeck-dialog {
      .el-dialog {
        .el-dialog__header {
          .el-dialog__title {
            color: #ffffff;
          }

          background:#409EFF;
        }

        .check-main {
          width: 100%;

          .title {
            line-height: 30px;
            font-size: 20px;
            text-align: center;
          }

          .code-input {
            width: calc(100% - 100px);
            float: left;
          }

          .getCode {
            float: right;
            width: 90px;
            height: 40px;
            border-radius: 3px;
            background: #1783dd;
            color: #ffffff;
            font-size: 14px;
            float: right;
            text-align: center;
            cursor: pointer;
          }

          .upload-button {
            margin: 0 auto;
            margin-top: 30px;
            display: block;
          }

          .up-box {
            margin: 0 auto;
            width: 520px;
            margin-top: 10px;
            text-align: center;

            .avatar-uploader {
              width: 242px;
              display: inline-block;
              height: 153px;
              position: relative;

            }

            .isbg {
              background: #000;

              .el-upload {
                border: 0 !important;
              }
            }

            .avatar-uploader:first-child {
              margin-right: 30px;
            }

            .avatar-uploader .el-upload,
            .avatar-uploader .el-upload:hover {
              border: 1px dashed #d9d9d9;

              cursor: pointer;
              position: absolute;

              overflow: hidden;
              display: inline-block;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              box-sizing: border-box;
            }

            .avatar-uploader .el-upload:hover {
              border-color: #409EFF;
            }

            .avatar-uploader-icon {
              font-size: 28px;
              color: #8c939d;
              width: 240px;
              height: 152px;
              line-height: 152px;
              text-align: center;

            }

            .avatar {
              max-width: 240px;
              max-height: 152px;
              display: block;
            }

            .text {
              display: block;
              width: 100%;
              text-align: center;
              position: absolute;
              line-height: 20px;
              font-size: 16px;
              color: #8c939d;
              top: 90px;
            }

            .el-icon-edit {
              position: absolute;
              left: 0;
              top: 0;
              font-size: 40px;
              color: #fff;
              display: block;
              width: 100%;
              height: 100%;
              line-height: 152px;
              text-align: center;
              background: rgba(0, 0, 0, 0.3);
            }
          }

        }
      }
    }

  }
</style>
